<template>
    <div>
      <h2>房租合同查询</h2>

      <!--form表单-->
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="租房合同编号">
          <el-input v-model="formInline.cfContractNo" placeholder="请输入租房合同编号"></el-input>
        </el-form-item>
        <el-form-item label="租客姓名">
          <el-input v-model="formInline.tenantName" placeholder="请输入租客姓名"></el-input>
        </el-form-item>
        <el-form-item label="小区名称">
          <el-input v-model="formInline.premiseName" placeholder="请输入小区名称"></el-input>
        </el-form-item>
        <el-form-item label="合同录入日期">
          <el-input v-model="formInline.startDate" type="date"></el-input>
        </el-form-item>
        至
        <el-form-item>
          <el-input v-model="formInline.endDate" type="date"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>

      <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column
          prop="cfContractNo"
          label="合同编号"
          width="180">
        </el-table-column>
        <el-table-column
          prop="premiseName"
          label="小区"
          width="180">
        </el-table-column>
        <el-table-column
          prop="startDate"
          label="起租日期"
          type="date">
        </el-table-column>
        <el-table-column
         prop="endDate"
         label="结束日期"
         type="date">
        </el-table-column>
        <el-table-column
          prop="inputDate"
          label="录入日期"
          type="date">
        </el-table-column>
        <el-table-column
          prop="auditDate"
          label="审核日期"
          type="date">
        </el-table-column>
        <el-table-column
          prop="tenantName"
          label="租客">
        </el-table-column>
        <el-table-column
          prop="inputUserId"
          label="录入人">
        </el-table-column>
      </el-table>


      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="this.formInline.pageNum"
        :page-sizes="[10, 12, 14, 16]"
        :page-size="this.formInline.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="this.formInline.total">
      </el-pagination>
    </div>
</template>

<script>
import {list } from "@/api/weishu/zukehetong/index";
export default {
  name: "index",
  data(){
    return{
      tableData:[],

      formInline:{
        pageNum:1,
        pageSize:10,
        total:0,
      },
    }
  },
  //方法名
  methods:{
    //查询
    select(){
       list(this.formInline).then(resp=>{
          this.formInline.total=resp.total
          this.tableData=resp.list
       })
    },
    handleSizeChange(val) {
       this.formInline.pageSize=val;
       console.log(this.pageSize)
       this.select()
    },
    handleCurrentChange(val) {
      this.formInline.pageNum=val;
      //console.log(this.pageNum)
      this.select()
    },
    onSubmit(){
      this.select();
    },
  },
  created() {
    this.select();
  }
}
</script>

<style scoped>

</style>
